<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>走了么旅游网</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css">
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
            background: linear-gradient(to bottom, rgba(173, 216, 230, 0.7), rgba(173, 216, 230, 0.4)), url('your_texture_image.jpg');
            background-repeat: repeat;
            background-blend-mode: overlay;
            line-height: 1.6;
}


        /* 头部样式 */
        header {
            background: linear-gradient(to bottom, #8cc, #69a);
            color: white;
            text-align: center;
            padding: 30px 0;
            max-width: 1260px;
            margin: 0 auto;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        }

        header h1 {
            font-size: 36px;
            margin: 0;
            padding-bottom: 5px;
            font-family: 'Lato', sans-serif;
            font-weight: 700;
        }

        /* 导航栏样式 */
        nav {
            background-color: #69a;
            color: white;
            padding: 15px 0;
            text-align: center;
            max-width: 1260px;
            margin: 0 auto;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
            display: flex;
            justify-content: center;

        }

        nav a {
            color: white;
            text-decoration: none;
            margin: 0 30px;
            font-size: 18px;
            transition: all 0.5s ease;
            display: flex;
            align-items: center;
        }

        nav a i {
            margin-right: 5px;
            color: #55aacc;
            font-size: 20px;
        }

        nav a:hover {
            color: paleturquoise;
            text-decoration: underline;
            background-color: #b3d9f2;
        }

        nav a:hover i {
            transform: scale(1.2);
        }

        nav a:active {
            background-color: #5285a6;
            box-shadow: 0 3px 5px rgba(0, 0, 0, 0.3);
        }

        /* 主体内容容器样式 */
       .container {
            max-width: 1200px;
            margin: 30px auto;
            padding: 30px;
            background-color: white;
            box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);
            position: relative;
        }

       .section-title {
            font-size: 32px;
            font-weight: 600;
            margin-bottom: 40px;
            color: #333;
            border-bottom: 1px solid #ccc;
            padding-bottom: 10px;
            margin-bottom: 20px;
        }

        /* 动画容器 */
       .featured-animation {
            width: 100%;
            height: 400px;
            position: relative;
            overflow: hidden;
        }

        /* 动画图片 */
       .featured-animation {
            top: 0;
            left: 0;
            width: 1200px;
            height: 600px;
            background-image: url('imgs/meijing.jpg');
            background-size: 100% 100%;
            animation: bgAnimation 10s linear infinite;
        }

        @keyframes bgAnimation {
            0% {
                background-image: url('imgs/meijing.jpg');
            }

            30% {
                background-image: url('imgs/meijing2.webp');
            }

            66.66% {
                background-image: url('imgs/meijing3.webp');
            }

            100% {
                background-image: url('imgs/meijing.jpg');
            }
        }

       .description {
            font-size: 18px;
            color: #555;
            font-family: Georgia, serif;
            font-style: italic;
        }

        /* 景点列表样式 */
       .attractions {
            display: flex;
            gap: 60px;
        }

       .attraction {
            width: calc(33.33% - 20px);
            background-color: white;
            box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1);
            padding: 25px;
            margin-bottom: 30px;
        }

       .attraction h3 {
            font-size: 24px;
            font-weight: bold;
            margin-bottom: 15px;
            color: #8cc;
        }

       .attraction img {
            width: 100%;
            height: auto;
            margin-bottom: 15px;
            box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2);
            border: 1px solid #ddd;
            border-radius: 5px;
            transition: all 0.3s ease;
            vertical-align: middle;
        }

       .attraction img:hover {
            transform: scale(1.1);
        }

       .attraction p {
            font-size: 16px;
            color: #555;
            font-family: Georgia, serif;
            text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
            transition: background-color 0.3s ease;
        }

       .attraction p:hover {
            background-color: rgba(200, 200, 200, 0.1);
        }

        /* 附近酒店部分 */
       .nearby-hotels {
            margin-top: 50px;
            background-color: #f5f5f5;
            padding: 30px;
            box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1);
        }

       .nearby-hotels h2 {
            font-size: 28px;
            font-weight: bold;
            color: #333;
            margin-bottom: 20px;
            border-bottom: 1px solid #ccc;
            padding-bottom: 10px;
            margin-bottom: 20px;
        }

       .hotel {
            display: flex;
            gap: 20px;
            margin-bottom: 20px;
        }

       .hotel img {
            width: 150px;
            height: 100px;
            object-fit: cover;
            border-radius: 5px;
            vertical-align: middle;
        }

       .hotel-info {
            flex: 1;
        }

       .hotel-info h3 {
            font-size: 20px;
            font-weight: bold;
            margin-bottom: 10px;
            color: #8cc;
        }

       .hotel-info p {
            font-size: 16px;
            color: #555;
            font-family: Georgia, serif;
            text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
            transition: background-color 0.3s ease;
        }

       .hotel-info p:hover {
            background-color: rgba(200, 200, 200, 0.1);
        }

        /* 路线地图部分 */
       .route-map {
            margin-top: 50px;
            background-color: #f5f5f5;
            padding: 30px;
            box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1);
        }

       .route-map h2 {
            font-size: 28px;
            font-weight: bold;
            color: #333;
            margin-bottom: 20px;
            border-bottom: 1px solid #ccc;
            padding-bottom: 10px;
            margin-bottom: 20px;
        }

       .map-container {
            width: 100%;
            /* 设置最大高度，确保不会过大 */
            max-height: 400px;
            overflow: hidden;
        }

       .map-container img {
            width: 100%;
            /* 根据需要调整最大高度 */
            max-height: 100%;
            object-fit: contain;
        }

        /* 底部样式 */
        footer {
            background-color: #8cc;
            color: white;
            text-align: center;
            padding: 20px 0;
            box-shadow: 0 -2px 4px rgba(0, 0, 0, 0.1);
        }

        footer p {
            font-size: 16px;
            margin: 0;
        }

       .social-icons {
            margin-top: 10px;
        }

       .social-icons i {
            margin: 0 10px;
            font-size: 24px;
        }
    </style>
</head>

<body>

    <header>
        <h1>走了么旅游网</h1>
    </header>

    <nav>
        <a href="#"><i class="fas fa-home"></i>首页</a>
        <a href="#"><i class="fas fa-hotel"></i>附近酒店</a>
        <a href="#"><i class="fas fa-map"></i>路线地图</a>
        <a href="#"><i class="fas fa-calendar-alt"></i>活动</a>
        <a href="#"><i class="fas fa-ellipsis-h"></i>其他</a>
        <a href="#"><i class="fas fa-info-circle"></i>关于我们</a>
    </nav>

    <div class="container">
        <h2 class="section-title">长白山——人间仙境</h2>
        <div class="featured-animation"></div>
        <p class="description">长白山，一座位于吉林省东南部的神奇山脉，融合了自然之美与人文魅力。它不仅是中国东北和朝鲜山地的总称，更是亚欧大陆东缘的最高山系。广义的长白山涵盖整个山系，一般意义上指长白山脉，而狭义则特指长白山主峰。

作为一座休眠火山，长白山拥有壮观的火山地貌和丰富的自然资源。其主峰白头山，因多白色浮石与积雪而得名。这里的火山地貌与冰川遗迹相互交织，呈现出如长白山天池、瀑布、雪雕、林海等著名自然风光。同时，长白山保存着欧亚大陆北半部最完整的森林生态系统，是地球同纬度带生物多样性最为丰富的自然生态区。

长白山地区气候垂直变化明显，冬季寒冷漫长，夏季温凉短暂。复杂的地质构造历经多次地壳运动，塑造了丰富的地质景观。此外，它还是松花江、鸭绿江、图们江三江之源，水文资源极为丰富。

长白山不仅是自然保护区，也是多民族聚居之地，拥有丰富的文化遗产。北方民族的森林、草原文化与汉族的农耕文化在此融合，形成了独具特色的长白山区域文化。自古以来，长白山就被视为神山，备受人们崇拜和敬仰。

这里旅游资源丰富，游客可以进行徒步、滑雪、温泉等多种活动，尽情感受大自然的魅力。而且，长白山交通便利，多种交通方式可供选择。</p>

        <div class="attractions">
            <div class="attraction">
                <h3>天池</h3>
                <img src="imgs/tianchi.jpg" alt="天池">
                <p>长白山天池，宛如一颗璀璨的明珠，镶嵌在长白山之巅。它是一座休眠火山口积水成湖，夏季湖水湛蓝如天，冬季冰面洁白如雪。十六座山峰环绕四周，仅在天豁峰和龙门峰之间有一狭道，池水由此溢出，飞泻而下形成壮丽的长白瀑布。</p>
            </div>
            <div class="attraction">
                <h3>长白瀑布</h3>
                <img src="imgs/pubu.webp" alt="长白瀑布">
                <p>长白瀑布乃松花江之源，天池之水从北侧天文峰与龙门峰的缺口奔腾而出，落差达 68 米。瀑布口有一巨石名曰“牛郎渡”，将瀑布分为两股，犹如两条玉龙扑向石滩，气势磅礴。</p>
            </div>
            <div class="attraction">
                <h3>聚龙温泉</h3>
                <img src="imgs/wenquan.webp" alt="聚龙温泉">
                <p>聚龙温泉是长白山温泉群中的佼佼者，水量最大、分布最广、水温最高。终年不断地从岩石缝隙中喷吐着沸腾的热水，温泉附近云雾缭绕，仿若仙境。</p>
            </div>
            <div class="attraction">
                <h3>长白十六峰</h3>
                <img src="imgs/shiliu.jpg" alt="长白十六峰">
                <p>长白十六峰各具特色，包括“白云峰”“芝盘峰”“华盖峰”“天豁峰”“龙门峰”“紫霞峰”“铁壁峰”“观日峰”“玉柱峰”“冠冕峰”“梯云峰”“卧虎峰”“孤隼峰”“锦屏峰”“白头峰”“三奇峰”。它们或雄伟壮观，或秀丽多姿，共同构成了长白山的壮丽画卷。</p>
            </div>
        </div>

        <!-- 附近酒店部分 -->
        <div class="nearby-hotels">
            <h2>附近酒店</h2>
            <div class="hotel">
                <a href="#"><img src="imgs/jiu1.jpg" alt="酒店1"></a>
                <div class="hotel-info">
                    <h3>懒大瑞民宿</h3>
                    <p>懒大瑞民宿独具特色与优势。建筑风格融合当地传统与现代简约元素，木质与砖石搭配，外观魅力十足。屋顶造型独特，门窗设计精巧，自然光线充足，通风良好。房间布置个性化，主题丰富多样，有以自然山水为主题的清新房间，也有复古风格的怀旧房间。提供丰富的文化体验，如传统手工艺制作课程和当地特色美食烹饪课程。服务优质，主人热情好客，员工专业贴心。交通便利，距主要景点和市区近，周边公交地铁众多。设施设备完善，房间有舒适床铺等现代化设备，公共区域设有餐厅、健身房、游泳池、花园等。价格合理，常推优惠活动和套餐，无论是度假还是商务出行，都能为旅客提供舒适、便捷、难忘的住宿体验。</p>
                </div>
            </div>
            <div class="hotel">
                <a href="#"><img src="imgs/jiu2.jpg" alt="酒店2"></a>
                <div class="hotel-info">
                    <h3>词安酒店</h3>
                    <p>词安酒店魅力非凡，特色显著。大堂将现代时尚与经典元素完美融合，高挑天花板下水晶吊灯璀璨夺目，大理石地面搭配柔软地毯，休息区舒适优雅。客房风格多样，从简约现代到古典优雅应有尽有。床铺柔软舒适，搭配高品质床品，设施齐全，部分房间还有阳台可赏美景。餐饮丰富，中餐厅有地道美食，西餐厅融合世界风味，酒吧氛围轻松，特色鸡尾酒诱人。总之，词安酒店以其独特特色为宾客提供高品质住宿体验，是旅途佳选。</p>
                </div>
            </div>
            <div class="hotel">
                <a href="#"><img src="imgs/jiu3.jpg" alt="酒店3"></a>
                <div class="hotel-info">
                    <h3>为了五十万彩礼开的酒店</h3>
                    <p>这家因五十万彩礼而开的“真爱彩礼酒店”，特色鲜明。大堂以粉色灯光营造温馨氛围，装饰着情侣甜蜜照片与爱情故事，充满爱意。客房按爱情阶段设计，初恋清新房简约活力，淡蓝装饰显纯真；热恋激情房红色调热烈，有浪漫帷幔与专属摆件。酒店提供特色爱情套餐服务，菜品如“心心相印”牛排、“甜蜜之吻”甜品等与爱情相关，还设爱情纪念区供情侣留印记。无论是庆祝爱情还是筹备彩礼期间停留，它都以独特特色成为情侣的浪漫之选。</p>
                </div>
            </div>
        </div>

        <div class="route-map">
            <h2>路线地图</h2>
            <div class="map-container">
                <img src="imgs/map1.png" alt="地图">
            </div>
        </div>
    </div>

    <footer>
        <p>版权所有 &copy; 2024 走了么旅游官网</p>
        <div class="social-icons">
            <i class="fab fa-facebook"></i>
            <i class="fab fa-twitter"></i>
            <i class="fab fa-instagram"></i>
        </div>
    </footer>

    <script>
        window.addEventListener('load', function () {
            document.body.classList.add('animate__animated', 'animate__fadeIn');
        });
    </script>
</body>

</html>